<template>
  <div id="info" style="position: relative">
    <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
    <h2>03 _ 缓动函数</h2>
    <p>The curves, visualised.</p>
  </div>
  <div id="target"></div>
</template>

<script setup lang="ts">
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import createGraph from "./core/createGraph";
import { ref, onMounted } from "vue";
const info = ref<HTMLElement>(null);

function init() {
  var target = document.getElementById("target");

  target.appendChild(createGraph("Linear.None", TWEEN.Easing.Linear.None));

  target.appendChild(document.createElement("br"));

  target.appendChild(createGraph("Quadratic.In", TWEEN.Easing.Quadratic.In));
  target.appendChild(createGraph("Quadratic.Out", TWEEN.Easing.Quadratic.Out));
  target.appendChild(
    createGraph("Quadratic.InOut", TWEEN.Easing.Quadratic.InOut)
  );

  target.appendChild(createGraph("Cubic.In", TWEEN.Easing.Cubic.In));
  target.appendChild(createGraph("Cubic.Out", TWEEN.Easing.Cubic.Out));
  target.appendChild(createGraph("Cubic.InOut", TWEEN.Easing.Cubic.InOut));

  target.appendChild(document.createElement("br"));

  target.appendChild(createGraph("Quartic.In", TWEEN.Easing.Quartic.In));
  target.appendChild(createGraph("Quartic.Out", TWEEN.Easing.Quartic.Out));
  target.appendChild(createGraph("Quartic.InOut", TWEEN.Easing.Quartic.InOut));

  target.appendChild(createGraph("Quintic.In", TWEEN.Easing.Quintic.In));
  target.appendChild(createGraph("Quintic.Out", TWEEN.Easing.Quintic.Out));
  target.appendChild(createGraph("Quintic.InOut", TWEEN.Easing.Quintic.InOut));

  target.appendChild(document.createElement("br"));

  target.appendChild(createGraph("Sinusoidal.In", TWEEN.Easing.Sinusoidal.In));
  target.appendChild(
    createGraph("Sinusoidal.Out", TWEEN.Easing.Sinusoidal.Out)
  );
  target.appendChild(
    createGraph("Sinusoidal.InOut", TWEEN.Easing.Sinusoidal.InOut)
  );

  target.appendChild(
    createGraph("Exponential.In", TWEEN.Easing.Exponential.In)
  );
  target.appendChild(
    createGraph("Exponential.Out", TWEEN.Easing.Exponential.Out)
  );
  target.appendChild(
    createGraph("Exponential.InOut", TWEEN.Easing.Exponential.InOut)
  );

  target.appendChild(document.createElement("br"));

  target.appendChild(createGraph("Circular.In", TWEEN.Easing.Circular.In));
  target.appendChild(createGraph("Circular.Out", TWEEN.Easing.Circular.Out));
  target.appendChild(
    createGraph("Circular.InOut", TWEEN.Easing.Circular.InOut)
  );

  target.appendChild(createGraph("Elastic.In", TWEEN.Easing.Elastic.In));
  target.appendChild(createGraph("Elastic.Out", TWEEN.Easing.Elastic.Out));
  target.appendChild(createGraph("Elastic.InOut", TWEEN.Easing.Elastic.InOut));

  target.appendChild(document.createElement("br"));

  target.appendChild(createGraph("Back.In", TWEEN.Easing.Back.In));
  target.appendChild(createGraph("Back.Out", TWEEN.Easing.Back.Out));
  target.appendChild(createGraph("Back.InOut", TWEEN.Easing.Back.InOut));

  target.appendChild(createGraph("Bounce.In", TWEEN.Easing.Bounce.In));
  target.appendChild(createGraph("Bounce.Out", TWEEN.Easing.Bounce.Out));
  target.appendChild(createGraph("Bounce.InOut", TWEEN.Easing.Bounce.InOut));
}

function animate(time?) {
  requestAnimationFrame(animate);

  TWEEN.update(time);
}

onMounted(() => {
  init();
  animate();
});
</script>

<style></style>
